<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建发货单</title>
    <link rel="stylesheet" href="dialog/dialog.css">
    <script src="dialog/jquery-3.1.1.min.js"></script>
    <script src="dialog/dialog.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .text_center {
            text-align: center;
        }

        .mt10 {
            margin-top: 10px;
        }

        .mb20 {
            margin-bottom: 20px;
        }

        .mb30 {
            margin-bottom: 30px;
        }

        #create_second {
            display: none;
            border: 1px solid #000;
            padding: 0 10px 20px;
            margin: 10px 30px;
        }

        #pallet_list_second, #box_list_second {
            overflow: auto;
            max-height: 180px;
        }

        #pallet_list_second li {
            border-radius: 100%;
        }

        #pallet_list_second li, #box_list_second li {
            position: relative;
            overflow: hidden;
            display: inline-block;
            width: 16%;
            min-width: 80px;
            height: 80px;
            text-align: center;
            /*color: #ffffff;*/
            /*color: rgba(0,0,0,.7);*/
            color: #484343;
            float: left;
            margin: 5px 2%;
            box-shadow: 0px 2px 7px 1px #999;
        }

        #pallet_list_second li i, #box_list_second li i {
            position: absolute;
            top: -5px;
            right: 0;
            font-style: normal;
        }
        #pallet_list_second li i {
            top: 4px;
            right: 14%;
        }

        #pallet_list_second li i:hover, #box_list_second li i:hover {
            font-size: 20px;
            cursor: pointer;
        }

        #pallet_list_second li p:first-child, #box_list_second li p:first-child {
            margin: 14px 0 0;
        }

        #add_box_second {
            display: none;
        }

        #add_goods_second {
            display: none;
        }

        #goods_box_list_second {
            display: none;
            border-collapse: collapse;
        }

        #goods_box_list_second th, #goods_box_list_second td {
            /*display: none;*/
            border: 1px solid #000;
            padding: 5px 10px;
        }

        .actived {
            /*background-color: #23ffbe;*/
            background: radial-gradient(circle,#fff, #23ffbe);
        }

        .fullOf {
            /*background: red;*/
            background: radial-gradient(circle,#fff, #ff0000);
        }

        td a, td a:hover {
            cursor: pointer;
            color: red;
        }
    </style>
</head>
<body>
<div class="text_center mt10 mb30">
    <button onclick="createSecond()">创建二</button>
</div>
<div id="create_second">
    <!--    <div class="opacity0">
            <input type="text" id="code_focus">
        </div>-->
    <!--<button id="add_pallet_second" onclick="createPalletSecond()">添加托盘</button>-->
    <ul id="pallet_list_second" class="mt10"></ul>
    <!--<button id="add_box_second" onclick="createBoxSecond()">添加箱子</button>-->
    <ul id="box_list_second" class="mt10"></ul>
    <!--<button id="add_goods_second" onclick="createGoodsSecond()">添加货品</button>-->
    <table id="goods_box_list_second" class="mt10">
        <!--<thead>
        <tr>
            <th>品名</th>
            <th>条形码</th>
            <th>数量</th>
        </tr>
        </thead>
        <tbody id="goods_list_second">
        <tr>
            <td>货品名</td>
            <td>111</td>
            <td><input type="text"></td>
        </tr>
        </tbody>-->
    </table>
</div>
<script>
    const palletType = 'T'; // 托盘类型
    const boxType = 'B'; // 箱子类型
    const goodsType = 'G'; // 货品类型
    var code = "";

    $(function () {
        var lastTime,nextTime;
        var lastCode,nextCode;

        document.onkeypress = function(e) {
            nextCode = e.which;
            nextTime = new Date().getTime();

            if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
                code += String.fromCharCode(lastCode);
            } else if(lastCode != null && lastTime != null && nextTime - lastTime > 100){
                code = "";
            }

            lastCode = nextCode;
            lastTime = nextTime;
            if(e.which == 13){

                // 获取到条形码 code
                console.log(code);

                var firstCode = code.substr(0, 1);
                // 判断条形码类型
                if (firstCode ==  palletType) {
                    createPalletSecond();
                } else if (firstCode ==  boxType) {
                    if (palletObjSeond.length == 0) {
                        alert('请先扫描托盘条形码');
                    } else {
                        createBoxSecond();
                    }
                } else if (firstCode == goodsType) {
                    if (palletObjSeond.length == 0) {
                        alert('请先扫描托盘条形码');
                    } else if (palletObjSeond[paleetSecondActive].child.length == 0) {
                        alert('请先扫描箱子条形码');
                    } else {
                        createGoodsSecond();
                    }
                }

                // 根据条形码处理相关业务
                $('#code_focus').val('');
                code = "";
            }
        }
    })

    /*第二种方法*/
    var palletObjSeond = [];
    var paleetSecondActive = 0;
    var boxSecondActive = 0;
    function createSecond() {
        $('#create_second').css({'display': 'block'});
        // $('#code_focus').focus();
    }

    // 托盘列表遍历
    function palletTraverse(index) {
        var palletList = $('#pallet_list_second');
        for (let i = 0; i < palletObjSeond.length; i++) {
            palletList.append(
                '<li onclick="selectPalletSecond(' + i + ')">' +
                '<p>' + palletObjSeond[i].name + '</p>' +
                '<p>箱子数：' + palletObjSeond[i].child.length +'</p>' +
                '<i onclick="delPalletSecond(' + i + ')">&otimes;</i>'+
                '</li>'
            );
            if (i == index) {
                $(palletList[0].children[paleetSecondActive]).addClass('actived');
                $(palletList[0].children[paleetSecondActive]).removeClass('fullOf');
            } else {
                $(palletList[0].children[i]).addClass('fullOf');
                $(palletList[0].children[i]).removeClass('actived');
            }
        }
    }

    // 添加托盘
    function createPalletSecond() {
        palletObjSeond.push({
            name: '托盘' + (palletObjSeond.length + 1),
            child: []
        });
        paleetSecondActive = palletObjSeond.length - 1;
        var palletList = $('#pallet_list_second');
        palletList.empty();
        $('#box_list_second').empty();
        $('#goods_box_list_second').empty();
        palletTraverse(palletObjSeond.length - 1);
    }

    // 托盘选择
    function selectPalletSecond(index) {
        paleetSecondActive = index;
        $('#box_list_second').empty();
        $('#goods_box_list_second').empty();
        $('#goods_list_second').empty();
        if (index == palletObjSeond.length) {
            paleetSecondActive = index - 1;
        }
        var palletList = $('#pallet_list_second');
        for (let i = 0; i < palletObjSeond.length; i++) {
            $(palletList[0].children[i]).addClass('fullOf');
            $(palletList[0].children[i]).removeClass('actived');
            if (paleetSecondActive == i) {
                $(palletList[0].children[i]).addClass('actived');
                $(palletList[0].children[i]).removeClass('fullOf');
            }
        }
        // 箱子显示
        if (palletObjSeond[paleetSecondActive].child.length > 0) {
            var boxList = $('#box_list_second');
            boxList.empty();
            boxTraverse(0);
            boxSecondActive = 0;

            // 货品显示
            if (palletObjSeond[paleetSecondActive].child[boxSecondActive].child.length > 0) {
                goodsTraverseTop();
                goodsTraverse();
            }
        }
    }

    // 删除托盘
    function delPalletSecond(index) {
        $($('#pallet_list_second')[0].children[index]).remove();
        palletObjSeond.splice(index, 1);
        if (index == paleetSecondActive) {
            $('#box_list_second').empty();
            $('#goods_box_list_second').empty();
            $('#goods_list_second').empty();
        }
        var palletList = $('#pallet_list_second');
        palletList.empty();

        palletTraverse(paleetSecondActive);
    }

    // 箱子列表遍历
    function boxTraverse(index) {
        var activedIndex = index;
        if (index == palletObjSeond[paleetSecondActive].child.length) {
            activedIndex = activedIndex - 1;
        }
        var boxList = $('#box_list_second');
        for (let i = 0; i < palletObjSeond[paleetSecondActive].child.length; i++) {
            boxList.append(
                '<li onclick="selectBoxSecond(' + i + ')">' +
                '<p>' + palletObjSeond[paleetSecondActive].child[i].name + '</p>' +
                '<p>货品数：' + palletObjSeond[paleetSecondActive].child[i].child.length +'</p>' +
                '<i onclick="delBox(' + i + ')">&otimes;</i>'+
                '</li>'
            );
            if (i == activedIndex) {
                $(boxList[0].children[i]).addClass('actived');
                $(boxList[0].children[i]).removeClass('fullOf');
            } else {
                $(boxList[0].children[i]).addClass('fullOf');
                $(boxList[0].children[i]).removeClass('actived');
            }
        }
    }

    // 添加箱子
    function createBoxSecond() {
        // $('#add_goods_second').css({'display': 'inline'});
        $('#goods_box_list_second').css({'display': 'block'});
        $('#goods_box_list_second').empty();
        palletObjSeond[paleetSecondActive].child.push({
            name: '箱子' + (palletObjSeond[paleetSecondActive].child.length + 1),
            child: []
        });
        $($('#pallet_list_second')[0].children[paleetSecondActive].children[1]).text('箱子数：' + palletObjSeond[paleetSecondActive].child.length);
        boxSecondActive = palletObjSeond[paleetSecondActive].child.length - 1;
        var boxList = $('#box_list_second');
        boxList.empty();
        boxTraverse(palletObjSeond[paleetSecondActive].child.length - 1);
    }

    // 箱子选择
    function selectBoxSecond(index) {
        boxSecondActive = index;
        $('#goods_box_list_second').empty();
        var boxList = $('#box_list_second');
        boxList.empty();

        if (index == palletObjSeond[paleetSecondActive].child.length) {
            boxSecondActive = index - 1;
        }
        // 箱子的显示
        boxTraverse(index);
        // 货品显示
        if (palletObjSeond[paleetSecondActive].child[boxSecondActive].child.length > 0) {
            goodsTraverseTop();
            goodsTraverse();
        } else {
            $('#goods_box_list_second').empty();
            $('#goods_list_second').empty();
        }
    }

    // 删除箱子
     function delBox(index) {
         $($('#box_list_second')[0].children[index]).remove();
         palletObjSeond[paleetSecondActive].child.splice(index, 1);
         if (index = boxSecondActive) {
             $('#goods_box_list_second').empty();
             $('#goods_list_second').empty();
         }
         if (index == palletObjSeond[paleetSecondActive].child.length) {
             boxSecondActive = index - 1;
         }
         var boxList = $('#box_list_second');
         boxList.empty();
         $($('#pallet_list_second')[0].children[paleetSecondActive].children[1]).text('箱子数：' + palletObjSeond[paleetSecondActive].child.length);
         // 箱子的显示
         boxTraverse(boxSecondActive);
         // 货品显示
         if (palletObjSeond[paleetSecondActive].child[boxSecondActive].child.length > 0) {
             goodsTraverseTop();
             goodsTraverse();
         } else {
             $('#goods_box_list_second').empty();
             $('#goods_list_second').empty();
         }
     }

     // 货品头部
    function goodsTraverseTop() {
        $('#goods_box_list_second').append(
            '<thead>' +
            '<tr>' +
            '<th>品名</th>' +
            '<th>条形码</th>' +
            '<th>数量</th>' +
            '<th>操作</th>' +
            '</tr>' +
            '</thead>' +
            '<tbody id="goods_list_second"></tbody>'
        );
    }

    // 货品遍历
    function goodsTraverse() {
        var goodsList = $('#goods_list_second');
        goodsList.empty();
        for (let k = 0; k < palletObjSeond[paleetSecondActive].child[boxSecondActive].child.length; k++) {
            goodsList.append(
                '<tr>' +
                '<td>' + palletObjSeond[paleetSecondActive].child[boxSecondActive].child[k].name + '</td>' +
                '<td>' + palletObjSeond[paleetSecondActive].child[boxSecondActive].child[k].barcode +'</td>' +
                '<td><input type="text" value="'+ palletObjSeond[paleetSecondActive].child[boxSecondActive].child[k].num + '" onkeypress="getGoodsNumSecond(this, ' + k + ')">' + '</td>' +
                '<td><a onclick="delGoods(' +  k +  ')">删除</a></td>' +
                '</tr>'
            );
        }
        var v = $(goodsList[0].children[palletObjSeond[paleetSecondActive].child[boxSecondActive].child.length - 1].children[2].children[0]).val();
        $(goodsList[0].children[palletObjSeond[paleetSecondActive].child[boxSecondActive].child.length - 1].children[2].children[0]).val('').focus().val(v);
    }

    // 添加货品
    function createGoodsSecond() {
        palletObjSeond[paleetSecondActive].child[boxSecondActive].child.push({
            name: '货品' + (palletObjSeond[paleetSecondActive].child[boxSecondActive].child.length + 1),
            // barcode: '条形码' + (palletObjSeond[paleetSecondActive].child[boxSecondActive].child.length + 1),
            barcode: code,
            num: 1
        });
        if (palletObjSeond[paleetSecondActive].child[boxSecondActive].child.length == 1) {
            goodsTraverseTop();
        }
        $($('#box_list_second')[0].children[boxSecondActive].children[1]).text('货品数：' + palletObjSeond[paleetSecondActive].child[boxSecondActive].child.length);
        goodsTraverse();
    }

    // 删除货品
    function delGoods(index) {
        $($('#goods_list_second')[0].children[index]).remove();
        palletObjSeond[paleetSecondActive].child[boxSecondActive].child.splice(index, 1);
        if ($('#goods_list_second')[0].children.length == 0) {
            $('#goods_box_list_second').empty();
            $('#goods_list_second').empty();
        }
        $($('#box_list_second')[0].children[boxSecondActive].children[1]).text('货品数：' + palletObjSeond[paleetSecondActive].child[boxSecondActive].child.length);
        goodsTraverse();
    }

    // 货品数量聚焦时获取的值
    function getGoodsNumSecond (e, index) {
        const containLetters = /[T|B|G]/i; //
        console.log(containLetters.test($(e)[0].value));
        if (containLetters.test($(e)[0].value)) {
            var containLettersIndex;
            if ($(e)[0].value.indexOf(palletType) !== -1 ) {
                containLettersIndex = $(e)[0].value.indexOf(palletType);
                $(e).val($(e)[0].value.slice(0, containLettersIndex - 1));
                createPalletSecond();
            } else if ($(e)[0].value.indexOf(boxType) !== -1 ) {
                containLettersIndex = $(e)[0].value.indexOf(boxType);
                $(e).val($(e)[0].value.slice(0, containLettersIndex - 1));
                createBoxSecond();
            } else {
                containLettersIndex = $(e)[0].value.indexOf(goodsType);
                code = $(e)[0].value.slice(containLettersIndex);
                var flag = false;
                // 判断是否有重复的货品条形码
                palletObjSeond[paleetSecondActive].child[boxSecondActive].child.forEach((val, i) => {
                    if (code == val.barcode) {
                        return flag = true;
                    }
                });
                if (flag) {
                    $(e).val(parseInt($(e)[0].value.slice(0, containLettersIndex)) + 1);
                } else {
                    $(e).val($(e)[0].value.slice(0, containLettersIndex));
                    createGoodsSecond();
                }
            }
        } else {
            if ($(e)[0].value) {
                // alert('提交成功');
                console.log(palletObjSeond);
            } else {
                alert('请将数量填写完整');
            }
        }
    }
</script>
</body>
</html>
